<template>
    <!-- 首页1线性统计图 -->
    <!-- 当日系统任务统计 -->
    <div id="barchart" ref="linechart2" style="width: 100%; height: 100%" />
</template>
<script>
import * as echarts from 'echarts';
const chartData = {
    xData: ["杭州",
        "宁波",
        "郑州",
        "上海",
        "深圳",
        "宁夏",
        "西安",
        "武汉",
        "成都",],
    data: [150, 140, 65, 80, 160, 210, 80, 60, 70],
}
export default {
    mounted() {
        let that = this;
        setTimeout(function () {
            that.initChart();
        }, 0)
    },
    methods: {
        initChart() {
            let curChart = echarts.init(document.getElementById('barchart'))
            const exampleOption = {
                // 提示框效果设置
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    formatter: (params) => {
                        const str = ` ${params[0].axisValue}
                    </br>
                    ${params[0].marker}安装量: ${params[0].value}`
                        return str;
                    },
                },
                // 图例设置
                legend: {
                    show: false,
                    textStyle: { fontSize: 15, color: '#fff' },
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 15,
                    top: '0%',
                    right: '0%',
                },
                textStyle: {
                    fontSize: 12
                },
                grid: {
                    containLabel: true, // 防止标签溢出
                    left: '0%',
                    top: '10%',
                    bottom: '0%',
                    right: '0%',
                },
                // X轴设置
                xAxis: {
                    type: 'category',
                    data: chartData.xData,
                    axisLine: {
                        lineStyle: {
                            color: '#979797',
                            opacity: 0.38
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        margin: 10,
                        fontFamily: 'Microsoft YaHei',
                        color: '#ffffff',
                        fontSize: 14
                    },
                },
                // Y轴设置
                yAxis: {
                    nameTextStyle: {
                        verticalAlign: 'middle',
                        align: "right"
                    },
                    type: 'value',
                    min: 0,
                    boundaryGap: ['0%', '10%'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            opacity: 0.38
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#fff'],
                            type: 'dashed',
                            opacity: 0.09,
                        },
                    },
                    axisLabel: {
                        fontSize: 15
                    },
                },
                series: [
                    // 柱状图描绘
                    {
                        name: "app安装量",
                        data: chartData.data,
                        type: 'bar',
                        // show:false,
                        barMaxWidth: 'auto',
                        barWidth: 27,
                        itemStyle: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: 'linear',
                                global: false,

                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#16B2FF',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(90,74,219,0.44)'
                                    },
                                ],
                            },
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}', // 在柱子上显示数据
                            color: '#fff', // 设置label颜色为红色
                            fontSize: 16,
                            // fontFamily: 'Microsoft YaHei'
                        },
                    },
                    // 菱形描绘
                    {
                        data: chartData.data,
                        type: 'pictorialBar',
                        barMaxWidth: 'auto',
                        symbolPosition: 'end', // 位置在柱状图顶部
                        symbol: 'diamond', // 图形类型为菱形
                        symbolOffset: [0, '-50%'], // 下移一半，遮住柱状图顶部
                        symbolSize: [25, 10],
                        zlevel: 200, // 菱形图形显示在柱状图之上
                        itemStyle: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1.3,
                                type: 'linear',
                                global: false,
                                textStyle: { fontSize: 15, color: '#fff' },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}', // 在柱子上显示数据
                                    color: '#168b9b' // 设置label颜色为红色
                                },
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#16B2FF',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(90,74,219,0.8)'
                                    },
                                ],
                            },
                        }
                    },
                ],
            };
            curChart.setOption(exampleOption)
        },
    }
};
</script>
